<template>
  <div>
    <button @click="curTab = 'Home'">Home</button>

    <button @click="curTab = 'About'">About</button>

    <hr />

    <Suspense @pending="onPending" @resolve="onResolve" @fallback="onFallback">
      <template #default>
        <component :is="curTab"></component>
      </template>

      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>

    <div>1111</div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
  data() {
    return {
      curTab: 'Home'
    }
  },

  methods: {
    onPending() {
      console.log('onPending')
    },
    onResolve() {
      console.log('onResolve')
    },
    onFallback() {
      console.log('onFallback')
    }
  },

  components: {
    Home: defineAsyncComponent(() => import('./components/Home.vue')),
    About: defineAsyncComponent(() => import('./components/About.vue'))
  }
}
</script>
